<template>
	<view class="page">
		<div class="page-content">
      <div class="play-list">
        <div class="play-list-item" v-for="item in playList">
          <div class="play-list-item-header">
            <u-section :title="item.name" :right="false" :font-size="32" color="rgb(254, 129, 5)"></u-section>
            <div class="status">{{ item.statusText }}</div>
          </div>
          <div class="play-list-item-header-desc">
            {{ item.active_name }}
          </div>
          <div class="cell-list">
            <div class="cell-item">
              发起人：{{ item.member.nickname }}
            </div>
            <div class="cell-item">
              标点：{{ item.name }}
              </div>
            <div class="cell-item">
              时间：{{ item.create_time }}
            </div>
            <div class="cell-item">
              备注：{{ item.remark }}
              </div>
            <div class="cell-item">
<!--              参与者：{{ item.participants.map(participant => participant.nickname).join('、') }}-->
              </div>
            <div class="cell-item">
<!--              概览：{{ item.active_name }}-->
              </div>
          </div>
        </div>
      </div>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        playList: [
        ]
			}
		},
    onShow() {
      this.getList()
    },
		methods: {
      getList() {
        this.$api.playList().then(res => {
          this.playList = res
        })
      }
		}
	}
</script>

<style lang="scss">
.page-content {
  padding: 20rpx;
}
.play-list-item {
  border-radius: 14rpx;
  overflow: hidden;
  background-color: #fff;
  .cell-list {
    padding: 20rpx;
    .cell-item {
      padding: 10rpx 0;
      font-size: 24rpx;
      color: #666;
    }
  }
  .play-list-item-header-desc {
    padding: 10rpx 20rpx;
    font-size: 28rpx;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
  }
  .play-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    .status {
      color: rgb(254, 129, 5);
      flex-shrink: 0;
    }
  }
}
</style>
